<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      span {
        color: blue;
      }
    </style>
  </head>
  <body>
    <span> 元素 </span>
    <span class="sp"> 有 class 的 span 1</span>
    <span class="sp"> 有 class 的 span 2</span>
    <span id="s"> 有 id 的 span s </span>
    <span ok="o"> 有 ok 属性的 span </span>

    <div>
      <p>pppppp</p>
    </div>

    <script>
      // 获取到网页的元素

      // 根据选择器获取一个元素
      let tag = document.querySelector("span"); // 标签选择器
      let sp = document.querySelector(".sp"); // class选择器
      let attr = document.querySelector("[ok]"); // 属性选择器

      // 根据选择器获取所有元素, 返回元素的集合
      let tags = document.querySelectorAll("span");
      let id = document.querySelectorAll("#s");

      // 根据 id 获取一个元素
      let s = document.getElementById("s");
      // 根据 class 获取元素
      let sps = document.getElementsByClassName("sp");
      // 根据 name 属性值获取元素
      //   document.getElementsByName("name");
      // 根据标签名称 获取元素
      //   document.getElementsByTagName("span");

      let p = document.querySelector("div>p");

      //   p.innerHTML = "<a href=''>超链接</a>";
      p.innerText = "<a href=''>超链接</a>";
      console.log(p);
    </script>
  </body>
</html>
